﻿<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>accordion</title>
<link rel="stylesheet" type="text/css" href="../css/grid-accordion.css" media="screen">
<link rel="stylesheet" type="text/css" href="../css/grid-accordion-example1.css" media="screen">
<link rel="stylesheet" type="text/css" href="../css/style.css" media="screen">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.gridAccordion.min.js"></script>
<script type="text/javascript">
	
jQuery(document).ready(function($) {
    $('.accordion').gridAccordion({
        width: 960,
        height: 680,
        columns: 5,
        distance: 2,
        closedPanelWidth: 10,
        closedPanelHeight: 10,
        alignType: 'centerCenter',
        slideshow: true,
        panelProperties: {
            0 : {
                captionWidth: 200,
                captionHeight: 35,
                captionTop: 30,
                captionLeft: 30
            },
            4 : {
                captionWidth: 150,
                captionHeight: 100,
                captionTop: 30,
                captionLeft: 650
            },
            7 : {
                captionWidth: 310,
                captionHeight: 35,
                captionTop: 350,
                captionLeft: 40
            },
            8 : {
                captionWidth: 300,
                captionHeight: 40,
                captionTop: 150,
                captionLeft: 35
            },
            11 : {
                captionWidth: 150,
                captionHeight: 120,
                captionTop: 300,
                captionLeft: 30
            },
            14 : {
                captionWidth: 300,
                captionHeight: 40,
                captionTop: 30,
                captionLeft: 50
            },
            16 : {
                captionWidth: 150,
                captionHeight: 120,
                captionTop: 150,
                captionLeft: 10
            },
            18 : {
                captionWidth: 300,
                captionHeight: 40,
                captionTop: 130,
                captionLeft: 50
            }
        }
    });
});
	
</script>
</head>
<body>

<br />
<div id="header"></div>
<ul class="accordion">
  <li> <a href="#"><img src="http://upload.inven.co.kr/upload/2013/12/05/bbs/i3069951222.gif" alt=""></a>
    <div class="caption">This is just a simple caption.</div>
  </li>
  <li> <a href="#"><img src="http://upload.inven.co.kr/upload/2013/08/31/bbs/i0592924048.gif" alt=""></a> </li>
  <li> <a href="#"><img src="http://www.jjalmoa.com/data/file/gif/2105638004_e3bbb270_74.gif" alt=""></a> </li>
  <li> <a href="#"><img src="http://www.jjalmoa.com/data/file/gif/2105638004_fcd103f0_23.gif" alt=""></a> </li>
  <li> <a href="#"><img src="http://www.jjalmoa.com/data/file/gif/2105638004_8d0807de_65.gif" alt=""></a>
    <div class="caption"><u>Title</u><br/>
      <br/>
      This is a list of items:
      <ul>
        <li>first item</li>
        <li>second item</li>
        <li>third item</li>
      </ul>
    </div>
  </li>
  <li> <a href="#"><img src="http://www.jjalmoa.com/data/file/gif/2105638004_a67ce5dd_95.gif" alt=""></a> </li>
  <li> <a href="#"><img src="http://www.jjalmoa.com/data/file/gif/2105638004_42e11593_5.gif" alt=""></a> </li>
  <li> <a href="#"><img src="http://www.jjalmoa.com/data/file/gif/2105638004_eb379c45_81.gif" alt=""></a>
    <div class="caption">Captions can have any position and any size.</div>
  </li>
  <li> <a href="#"><img src="http://www.jjalmoa.com/data/file/gif/2105638004_5f852b12_43.gif" alt=""></a>
    <div class="caption">Add <b>HTML</b> elements like <a href="#">links</a> or
      <input type="button" value="Buttons">
    </div>
  </li>
  <li> <a href="#"><img src="http://www.jjalmoa.com/data/file/gif/2105638004_ef299ac2_58.gif" alt=""></a> </li>
  <li> <a href="#"><img src="http://www.jjalmoa.com/data/file/gif/2105638004_ff3db728_2.gif" alt=""></a> </li>
  <li> <a href="#"><img src="http://www.jjalmoa.com/data/file/gif/2105638004_a32750b6_51.gif" alt=""></a>
    <div class="caption"><u>Title</u><br/>
      <br/>
      This is a list of items:
      <ul>
        <li>first item</li>
        <li>second item</li>
        <li>third item</li>
      </ul>
    </div>
  </li>
  <li> <a href="#"><img src="http://www.jjalmoa.com/data/file/gif/2105638004_d815aeb6_55.gif" alt=""></a> </li>
  <li> <a href="#"><img src="http://www.jjalmoa.com/data/file/gif/2105638004_842fe5d6_99.gif" alt=""></a> </li>
  <li> <a href="#"><img src="http://www.jjalmoa.com/data/file/gif/1265179220_d4019645_37.gif" alt=""></a>
    <div class="caption">Add <b>HTML</b> elements like <a href="#">links</a> or
      <input type="button" value="Buttons">
    </div>
  </li>
  <li> <a href="#"><img src="http://www.jjalmoa.com/data/file/gif/1265179220_f3fc462e_20.gif" alt=""></a> </li>
  <li> <a href="#"><img src="http://www.jjalmoa.com/data/file/gif/1265179220_7ce4cdd7_64.gif" alt=""></a>
    <div class="caption"><u>Title</u><br/>
      <br/>
      This is a list of items:
      <ul>
        <li>first item</li>
        <li>second item</li>
        <li>third item</li>
      </ul>
    </div>
  </li>
  <li> <a href="#"><img src="http://www.jjalmoa.com/data/file/gif/1265179220_4876680c_69.gif" alt=""></a> </li>
  <li> <a href="#"><img src="http://www.jjalmoa.com/data/file/gif/2105638004_c59c80c2_1.gif" alt=""></a>
    <div class="caption">Add <b>HTML</b> elements like <a href="#">links</a> or
      <input type="button" value="Buttons">
    </div>
  </li>
  <li> <a href="#"><img src="http://appdata.hungryapp.co.kr/data_file/data_img_m/201312/16/MRyTyhw138718703619969195.gif" alt=""></a> </li>
</ul>
</body>
</html>
